<template>
    <section class="checkAnalysis">
        <div style="display: flex;">
            <el-card class="chartsCard" shadow="never">
                <template slot="header">
                    <div style="display: flex">
                        <div style="flex:1;text-align: left;font-weight: bold">{{chartsTitle}}</div>
                        <div style="flex:1;text-align: right">
                            <div class="selectDate"></div>
                            <span class="selectLabel">选择年份</span>
                            <el-date-picker
                                v-model="taskYear"
                                @change="handCurrentYear"
                                type="year"
                                placeholder="请选择年份"
                                value-format="yyyy">
                            </el-date-picker>
                        </div>
                    </div>
                </template>
                <div class="chartsHeight" v-loading="chartsLoad"
                     element-loading-text="图表加载中..." element-loading-background="rgba(255, 255, 255, 1)">
                    <div v-if="hasResult">
                        <!--正态分布图-->
                        <NormalDistribution @hasResult="handleHasResult" :taskYear="taskYear" v-if="currentBtn === 'charts'"></NormalDistribution>
                        <!--双验证-->
                        <div v-show="currentBtn === 'doubleCheck'" class="chartsHeight">
                            <div>
                                <div style="float: left">
                                    <div class="town"></div>
                                    <span class="selectLabel">当前镇</span>
                                    <el-select v-model="doubleCheckDistrictId" placeholder="请选择镇" @change="handleDoubleCheck" size="mini" >
                                        <el-option
                                            v-for="item in townList"
                                            :key="item.districtId"
                                            :label="item.districtName"
                                            :value="item.districtId">
                                        </el-option>
                                    </el-select>
                                </div>
                                <!-- <div style="float: right">
                                    <el-radio-group v-model="doubleCheckChartType" size="mini" @change="handleRadioGroup"
                                    style="margin-right: -66px;">
                                        <el-radio-button label="kChart">K线图</el-radio-button>
                                        <el-radio-button label="line">折线图</el-radio-button>
                                    </el-radio-group>
                                </div> -->

                            </div>
                            <div style="display: flex;clear: both">
                                <div style="flex: 1" class="doubleCheck">
                                    <div class="doubleCheckTitle">
                                        <div style="flex: 1">工作实绩验证分析</div>
                                        <div class="doubleTip" v-if="doubleCheckList.city">
                                            <div style="color: #1f74ff">
                                                <span class="analysis_label">全市平均偏移度：</span>
                                                <span class="analysis_value">{{doubleCheckList.city.villagePerMonitorIndexDistanceAvg.toFixed(2)}}%</span>
                                            </div>
                                            <div style="color: #ff8545">
                                                <span class="analysis_label">当前镇偏移度：</span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.villagePerMonitorIndexDistanceAvg)>parseFloat(doubleCheckList.city.villagePerMonitorIndexDistanceAvg)">
                                                    <span style="color: #ff3b35;font-weight: bold">
                                                        {{doubleCheckList.town.villagePerMonitorIndexDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-top" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.villagePerMonitorIndexDistanceAvg)<parseFloat(doubleCheckList.city.villagePerMonitorIndexDistanceAvg)">
                                                    <span style="color: #0fbb49;font-weight: bold">
                                                        {{doubleCheckList.town.villagePerMonitorIndexDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-bottom" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="workChart" class="doubleCheckChartHeight" ></div>
                                </div>
                                <div style="flex: 1" class="doubleCheck">
                                    <div class="doubleCheckTitle">
                                        <div style="flex: 1">能力研判验证分析</div>
                                        <div class="doubleTip" v-if="doubleCheckList.city">
                                            <div style="color: #1f74ff">
                                                <span class="analysis_label">全市平均偏移度：</span>
                                                <span class="analysis_value">{{doubleCheckList.city.dvmAndAbilityJudgementDistanceAvg.toFixed(2)}}%</span>
                                            </div>
                                            <div style="color: #ff8545">
                                                <span class="analysis_label">当前镇偏移度：</span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.dvmAndAbilityJudgementDistanceAvg)>parseFloat(doubleCheckList.city.dvmAndAbilityJudgementDistanceAvg)">
                                                    <span style="color: #ff3b35;font-weight: bold">
                                                        {{doubleCheckList.town.dvmAndAbilityJudgementDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-top" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.dvmAndAbilityJudgementDistanceAvg)<parseFloat(doubleCheckList.city.dvmAndAbilityJudgementDistanceAvg)">
                                                     <span style="color: #0fbb49;font-weight: bold">
                                                        {{doubleCheckList.town.dvmAndAbilityJudgementDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-bottom" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="abilityChart" class="doubleCheckChartHeight" ></div>
                                </div>
                                <div style="flex: 1" class="doubleCheck">
                                    <div class="doubleCheckTitle">
                                        <div style="flex: 1">日常表现验证分析</div>
                                        <div class="doubleTip" v-if="doubleCheckList.city">
                                            <div style="color: #1f74ff">
                                                <span class="analysis_label">全市平均偏移度：</span>
                                                <span class="analysis_value">{{doubleCheckList.city.comprehensiveEvaluationAndCommonWorkDistanceAvg.toFixed(2)}}%</span>
                                            </div>
                                            <div style="color: #ff8545">
                                                <span class="analysis_label">当前镇偏移度：</span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.comprehensiveEvaluationAndCommonWorkDistanceAvg)>parseFloat(doubleCheckList.city.comprehensiveEvaluationAndCommonWorkDistanceAvg)">
                                                     <span style="color: #ff3b35;font-weight: bold">
                                                        {{doubleCheckList.town.comprehensiveEvaluationAndCommonWorkDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-top" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                                <span class="analysis_value" v-if="parseFloat(doubleCheckList.town.comprehensiveEvaluationAndCommonWorkDistanceAvg)<parseFloat(doubleCheckList.city.comprehensiveEvaluationAndCommonWorkDistanceAvg)">
                                                    <span style="color: #0fbb49;font-weight: bold">
                                                        {{doubleCheckList.town.comprehensiveEvaluationAndCommonWorkDistanceAvg.toFixed(2)}}%
                                                         <i class="el-icon-bottom" style="font-weight: bold"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="dailyChart" class="doubleCheckChartHeight" ></div>
                                </div>
                            </div>
                        </div>
                        <!--满分指标-->
                        <div v-show="currentBtn === 'fullScore'" class="chartsHeight">
                            <div>
                                <div class="fullScoreImg"></div>
                                <span class="selectLabel">满分率</span>
                                <el-select v-model="fullScoreRate" placeholder="请选择满分率" @change="handleFullScore" size="mini" >
                                    <el-option
                                        v-for="item in fullScoreRateList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="display: flex;">
                                <div id="fullScoreChart" class="fullScore" style="flex: 3"></div>
                                <div class="ageOutDiv" style="margin-top: 30px">
                                    <div class="ageInnerTitleDiv">
                                        <div class="fullScoreLabel">党组织</div>
                                        <div class="fullScoreLabel">满分指标</div>
                                    </div>
                                    <div class="ageInnerContentOutDiv" >
                                        <div class="fullScoreContent">
                                            <div v-for="(item,index) in fullScoreList" :class="`fullScoreItemContent ${index%2 === 1?'fullScoreItemBg':''}`">
                                                <div class="fullScoreItem">
                                                    {{item.districtName}}
                                                </div>
                                                <div class="fullScoreItem">
                                                    {{item.quotaName}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--后备干部培养-->
                        <div v-show="currentBtn === 'reserveTalent'" class="chartsHeight">
                            <div>
                                <div style="margin-bottom: 20px">
                                    <div class="rank"></div>
                                    <span class="selectLabel">排名</span>
                                    <el-select v-model="reserveIndex" placeholder="请选择排名" @change="handleReserveTalent" size="mini" >
                                        <el-option
                                            v-for="item in reserveIndexList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div style="display: flex">
                                <div style="flex: 2">
                                    <div id="reserveTalentChart" class="reserveTalent"></div>
                                </div>
                                <div class="ageOutDiv" style="margin-top: 20px">
                                    <div class="ageInnerTitleDiv">
                                        <div class="listLabel">45岁以下</div>
                                        <div class="listLabel">45岁-55岁</div>
                                        <div class="listLabel">55岁以上</div>
                                    </div>
                                    <div class="ageInnerContentOutDiv">
                                        <div class="ageContent">
                                            <div class="ageContentDivide">
                                                <div v-for="item in reserveTalentsList['45岁以下']" class="listItemLabel">
                                                    {{item.cadresName}}
                                                </div>
                                            </div>
                                            <div class="ageContentDivide">
                                                <div v-for="item in reserveTalentsList['45岁-55岁']" class="listItemLabel">{{item.cadresName}}</div>
                                            </div>
                                            <div class="ageContentDivide">
                                                <div v-for="item in reserveTalentsList['55岁以上']" class="listItemLabel">{{item.cadresName}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-show="currentBtn === 'activity'" class="chartsHeight" style="display: flex">
                            <div style="flex: 1" v-for="(item,index) in activityPersonList" >
                                <div class="activityProgress" >
                                    <radial-progress-bar
                                        style="margin: 0 auto"
                                        :diameter="220"
                                        :completed-steps="item.isPercent === '1'?parseFloat(item.avg)*100:parseFloat(item.avg)"
                                        :total-steps="100"
                                        :strokeWidth="20"
                                        startColor="#55BD94"
                                        stopColor="#55BD94"
                                        innerStrokeColor="#D1F3D9">
                                        <p style="font-size: 12px;color: #55BD94;">{{item.isPercent === '1' ?'百分比':'平均值'}}</p>
                                        <p style="font-size: 32px;color:#55BD94;line-height: 40px;position: relative;right: 8px">
                                            <span style="position: relative;right: -16px">
                                                {{item.isPercent === '1'?parseFloat(item.avg)*100+'%':parseFloat(item.avg)}}
                                            </span>
                                            <span v-if="parseFloat(item.avg)>parseFloat(item.standard)">
                                                <i class="el-icon-top" style="font-size: 32px!important;" ></i>
                                            </span>
                                            <span v-if="parseFloat(item.avg)<parseFloat(item.standard)">
                                                <i class="el-icon-bottom" style="font-size: 32px!important;"></i>
                                            </span>
                                        </p>
                                        <p style="font-size: 22px;color: #55BD94;line-height: 22px">{{item.label}}</p>
                                    </radial-progress-bar>
                                    <div class="implement_activity" v-if="parseFloat(item.avg)<parseFloat(item.standard)">
                                        <span>建议开展相关活动</span>
                                    </div>
                                </div>
                                <div class="promoteActivity">
                                    <div class="promoteActivityTitle">
                                        <div style="float: left" >{{item.label}}</div>
                                        <div style="float: right;font-size: 14px">
                                            <span v-if="item.isPercent === '1'">百分比：{{parseFloat(item.avg)*100}}%</span>
                                            <span v-else>平均值：{{item.avg}}</span>
                                            <span v-if="parseFloat(item.avg)>parseFloat(item.standard)">
                                                <i class="el-icon-top"></i>
                                            </span>
                                            <span v-else>
                                                <i class="el-icon-bottom" ></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="promoteActivityDes">
                                        <div class="activityImg">
                                            <el-image :src="promoteActivityImg[item.label]"></el-image>
                                        </div>
                                        <div class="activityDes">
                                            <div>总分：0</div>
                                            <div>标准值：{{ item.isPercent === '1' ? parseFloat(item.standard)*100+'%':item.standard}}</div>
                                            <div v-if="item.isPercent === '1'">百分比：{{parseFloat(item.avg)*100}}%
                                                <span v-if="parseFloat(item.avg)<parseFloat(item.standard)">
                                                    <span>(低于{{parseFloat(item.standard)*100}}%)</span>
                                                </span>
                                            </div>
                                            <div v-else>
                                                <span v-if="parseFloat(item.avg)<parseFloat(item.standard)">
                                                    平均分：{{item.avg}}<span>(低于{{item.standard}})</span>
                                                </span>
                                                <span :class="`${parseFloat(item.avg)>parseFloat(item.standard)? 'avg_gt' : ''}`" v-else-if="parseFloat(item.avg)>parseFloat(item.standard)">
                                                  平均分：{{item.avg}}&nbsp;<span class="el-icon-top"></span>
                                                </span>
                                                <span v-else>平均分：{{item.avg}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="activityPersonBtn">
                                        <div v-if="activityActive.indexOf(index)>-1" @click="handlePersonVis(index,'close')">收起名单&nbsp;<i class="el-icon-arrow-up"></i></div>
                                        <div v-else @click="handlePersonVis(index,'open')">查看建议名单&nbsp;<i class="el-icon-arrow-down"></i></div>
                                    </div>
                                    <el-collapse-transition>
                                        <div v-if="activityActive.indexOf(index)>-1" class="personListOut">
                                            <div v-for="(sub,subIndex) in item.last40" :class="subIndex%2===0?'activityItemLeftLabel':'activityItemLabel'">
                                                {{sub.districtName.replace(/支部|党总支/,'')}}：{{sub.cadresName}}
                                            </div>
                                        </div>
                                    </el-collapse-transition>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div v-show="!hasResult && !chartsLoad">
                        <img src="../../static/village/no-data-result-ay.png" style="margin: 150px auto;display: block" alt="">
                    </div>
                </div>
            </el-card>
            <el-card class="chartsBtnDiv" shadow="never">
                <div :class="currentBtn === 'charts'?'chartsBtnActive':'chartsBtn'" @click="showCharts('charts','考核体系健康度分析')">考核体系健康度分析</div>
                <div :class="currentBtn === 'doubleCheck'?'chartsBtnActive':'chartsBtn'" @click="showCharts('doubleCheck','考核结果验证分析')">考核结果验证分析</div>
                <div :class="currentBtn === 'reserveTalent'?'chartsBtnActive':'chartsBtn'" @click="showCharts('reserveTalent','队伍建设规划分析')">队伍建设规划分析</div>
                <div :class="currentBtn === 'activity'?'chartsBtnActive':'chartsBtn'" @click="showCharts('activity','年度村书记培训方向建议')">年度村书记培训方向建议</div>
                <!-- <div :class="currentBtn === 'fullScore'?'chartsBtnActive':'chartsBtn'" @click="showCharts('fullScore','指标设置合理性分析')">指标设置合理性分析</div> -->
                <div class="tool"></div>
                <div class="toolValue">{{btnDes[currentBtn].name}}</div>
                <div class="ruleDes"></div>
                <div class="ruleDesValue">{{btnDes[currentBtn].value}}</div>
            </el-card>
        </div>
    </section>
</template>

<script>
    import NormalDistribution from "@/components/charts/NormalDistribution";
    import RadialProgressBar from 'vue-radial-progress';
    export default {
        name: "CheckAnalysis",
        data(){
            return{
                chartsTitle:'考核体系健康度分析',
                currentBtn:'charts',
                chartsLoad: true,
                taskYear:'',
                fullScoreList:[],
                reserveTalentsList:[],
                townList:[],
                doubleCheckList:[],
                doubleCheckDistrictId:'',
                fullScoreRate:'',
                fullScoreRateList:[
                    {label:'50%',value:'0.5'},
                    {label:'75%',value:'0.75'},
                    {label:'100%',value:'1'},
                ],
                colorList:['#55BD94'],
                reserveIndex:'',
                reserveIndexList:[
                    {label:'前10名',value:'10'},
                    {label:'前20名',value:'20'},
                    {label:'前30名',value:'30'},
                ],
                activityPersonList:[],
                doubleCheckChartType:'kChart',
                btnDes:{
                    charts:{
                        name:'正态分布图',
                        value:'比较镇级考核结果与市级考核结果的一致性，以此反映镇级考核体系健康度。'
                    },
                    doubleCheck:{
                        name:'偏差图',
                        value:'比较考核指标的关联性（结果一致性），形成相互验证的考核机制，以此提高考核工作精准度。'
                    },
                    fullScore:{
                        name:'满分指标柱状图',
                        value:'分析考核体系中的满分指标的数量，以此反映考核指标合理性。'
                    },
                    reserveTalent:{
                        name:'排名分布散点图',
                        value:'分析不同年龄段村书记的考核排名分布，为市级制定村书记队伍培养规划提供依据，使其更具有针对性，更具科学性。'
                    },
                    activity:{
                        name:'临界值检验法',
                        value:'以村级发展系数反映村级经济发展情况，并设置临界值。当发展系数低于临界值，建议优先开展产业发展类培训。'
                    }
                },
                hasResult: true,
                promoteActivityImg:{
                    '产业类':'/static/img/secretary/industry.png',
                    '党建类':'/static/img/secretary/partyBuilding.png',
                    '政策法规类':'/static/img/secretary/policies.png',
                    '治理类':'/static/img/secretary/government.png',
                },
                activityActive:[],
            }
        },
        methods:{
            /*按钮控制*/
            showCharts(index,title){
                if (this.currentBtn === index) {
                    return;
                }
                this.chartsLoad = true;
                this.chartsTitle = title;
                this.currentBtn = index;
                if (!this.hasResult) {
                    this.doCharsLoadingClose();
                    return;
                }
                this.$nextTick(_ => {
                    if(index=='doubleCheck'){
                        this.doubleCheckChartType ='kChart';
                        this.doubleCheckDistrictId = this.townList[0].districtId;
                        this.showDoubleVerifyData(this.doubleCheckChartType);
                    } else if(index=='fullScore'){
                        this.fullScoreRate = this.fullScoreRateList[2].value;
                        this.showFullScoreData();
                    } else if(index=='reserveTalent'){
                        this.reserveIndex = this.reserveIndexList[0].value;
                        this.showReserveTalentData();
                    } else if(index=='activity'){
                        this.activityActive = [];
                        this.showActivityPersonData();
                    }
                })
            },
            /*控制年份*/
            handCurrentYear(){
                this.chartsLoad = true;
                this.currentBtn = 'charts';
                this.chartsTitle = '考核体系健康度分析';
                this.hasResult = true;
            },
            /*双验证控制镇*/
            handleDoubleCheck(){
                this.doubleCheckChartType ='kChart';
                this.showDoubleVerifyData('kChart');
            },
            /*满分指标控制满分率*/
            handleFullScore(){
                this.showFullScoreData();
            },
            /*后备干部控制排名*/
            handleReserveTalent(){
                this.showReserveTalentData();
            },
            /*双验证数据，按镇显示*/
            showDoubleVerifyData(chartType){
                this.$http('POST',`identity/kPIStatistics/list`,{districtId:this.doubleCheckDistrictId,taskYear:this.taskYear},false).then(data=>{
                    this.doubleCheckList = data;
                    let xData = [];
                    let workData = [];
                    let abilityData = [];
                    let dailyData = [];
                    let villagePerformance = [];
                    let monitoringIndex = [];
                    let dvm = [];
                    let abilityJudgement = [];
                    let routine = [];
                    let comprehensiveEvaluation = [];
                    let workLegend = ['村级实绩','监测指标'];
                    let abilityLegend = ['日常工作、村级实绩、监测指标','能力研判'];
                    let dailyLegend = ['日常工作','综合评议'];
                    // if(chartType=='line'){
                        // data.data.forEach(item=>{
                        //     xData.push(item.districtName.replace(/支部/g, ''));
                        //     villagePerformance.push(item.villagePerformance);
                        //     monitoringIndex.push(item.monitoringIndex);
                        //     dvm.push(item.dvm);
                        //     abilityJudgement.push(item.abilityJudgement);
                        //     routine.push(item.routine);
                        //     comprehensiveEvaluation.push(item.comprehensiveEvaluation);
                        // });
                        // workData.push(
                        //     {name:'村级实绩', type: 'line', stack: '排名1',  symbolSize: 8,smooth: true, data:villagePerformance},
                        //     {name:'监测指标', type: 'line', stack: '排名2',  symbolSize: 8, smooth: true, data:monitoringIndex}
                        // );
                        // abilityData.push(
                        //     {name:'日常工作、村级实绩、监测指标', type: 'line',  symbolSize: 8, stack: '排名1', smooth: true, data:dvm},
                        //     {name:'能力研判', type: 'line', stack: '排名2',  symbolSize: 8, smooth: true, data:abilityJudgement}
                        // );
                        // dailyData.push(
                        //     {name:'日常工作', type: 'line', stack: '排名1',  symbolSize: 8, smooth: true, data:routine},
                        //     {name:'综合评议', type: 'line', stack: '排名2',   symbolSize: 8, smooth: true, data:comprehensiveEvaluation}
                        // );
                        // this.$nextTick(()=>{
                        //     this.doCharsLoadingClose(() => {
                        //         this.drawDoubleCheckChart(chartType,'workChart',workLegend,xData,workData);
                        //         this.drawDoubleCheckChart(chartType,'abilityChart',abilityLegend,xData,abilityData);
                        //         this.drawDoubleCheckChart(chartType,'dailyChart',dailyLegend,xData,dailyData);
                        //     });
                        // })
                    // }else if(chartType=='kChart'){
                        let kWorkData = [];
                        let lineWorkData = [];
                        let kAbilityData = [];
                        let lineAbilityData = [];
                        let kDailyData = [];
                        let lineDailyData = [];
                        data.data.forEach(item=>{
                            xData.push(item.districtName.replace(/支部/g, ''));
                            kWorkData.push([item.villagePerformance,item.monitoringIndex,item.villagePerformance,item.monitoringIndex]);
                            lineWorkData.push(Math.abs(parseFloat(item.villagePerformance)-parseFloat(item.monitoringIndex)));
                            kAbilityData.push([item.dvm,item.abilityJudgement,item.dvm,item.abilityJudgement]);
                            lineAbilityData.push(Math.abs(parseFloat(item.dvm)-parseFloat(item.abilityJudgement)));
                            kDailyData.push([item.routine,item.comprehensiveEvaluation,item.routine,item.comprehensiveEvaluation]);
                            lineDailyData.push(Math.abs(parseFloat(item.routine)-parseFloat(item.comprehensiveEvaluation)));
                        });
                        let itemStyle = {
                            normal: {
                                color: 'red', // 阳线填充颜色
                                color0: 'red', // 阴线填充颜色
                                borderColor: 'red', // 阳线边框颜色
                                borderColor0: 'red' // 阴线边框颜色
                            },
                            emphasis: {
                                color: 'red', // 阳线填充颜色
                                color0: 'red' // 阴线填充颜色
                            }
                        };
                        workData.push({type:'k',itemStyle:itemStyle,data:kWorkData},{type:'bar',data:lineWorkData});
                        abilityData.push({type:'k',itemStyle:itemStyle,data:kAbilityData},{type:'bar',data:lineAbilityData});
                        dailyData.push({type:'k',itemStyle:itemStyle,data:kDailyData},{type:'bar',data:lineDailyData});
                        this.$nextTick(()=>{
                            this.doCharsLoadingClose(() => {
                                this.drawDoubleCheckChart(chartType,'workChart',workLegend,xData,workData);
                                this.drawDoubleCheckChart(chartType,'abilityChart',abilityLegend,xData,abilityData);
                                this.drawDoubleCheckChart(chartType,'dailyChart',dailyLegend,xData,dailyData);
                            });
                        })
                    // }
                }).catch(this.doCharsLoadingClose);
            },
            /*双验证图形切换*/
            // handleRadioGroup(val){
            //     this.chartsLoad = true;
            //     this.$nextTick(this.showDoubleVerifyData(val));
            // },
            /*双验证图*/
            drawDoubleCheckChart(chartType,chartId,legendData,xData,yData){
                let chart = echarts.init(document.getElementById(chartId));
                chart.clear();
                // if(chartType=='line'){
                //     let option = {
                //         tooltip: {
                //             trigger: 'axis',
                //             formatter: function (params) {
                //                 return params[0].axisValueLabel + ' :<br/>'
                //                     + params[0].seriesName + '得分率：' +  params[0].value + '%<br/>'
                //                     + params[1].seriesName + '得分率：' +  params[1].value + '%<br/>'
                //             },
                //         },
                //         legend: {
                //             data: legendData
                //         },
                //         grid: {
                //             top: '50',
                //             height: 'auto',
                //         },
                //         xAxis: {
                //             type: 'category',
                //             boundaryGap: false,
                //             data: xData,
                //             axisPointer: {
                //                 type: 'shadow'
                //             },
                //             axisLabel: {
                //                 interval:0,
                //                 rotate:40
                //             },
                //             name:'支部',
                //         },
                //         yAxis: {
                //             type: 'value',
                //             name:'得分率（%）'
                //         },
                //         series: yData
                //     };
                //     chart.setOption(option);
                // }else if(chartType=='kChart'){
                    let option = {
                        color :['#55BD94'],
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                return params[0].axisValueLabel + ' :<br/>'
                                    + legendData[0] + '得分率：' +  params[0].value[1] + '%<br/>'
                                    + legendData[1] + '得分率：' +  params[0].value[2] + '%<br/>'
                                    + '差值：' +  `${Math.abs(parseFloat(params[0].value[1])-parseFloat(params[0].value[2]))}` + '%<br/>'
                            },
                        },
                        xAxis: {
                            data: xData,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                interval:0,
                                rotate:40
                            },
                            name:'支部',
                        },
                        yAxis: {
                            type: 'value',
                            name:'得分率（%）'
                        },
                        series: yData
                    };
                    chart.setOption(option);
                // }
            },
            /*满分指标数据*/
            showFullScoreData(){
                this.$http('GET',`identity/kPIVillageQuota/getFullScore?taskYear=${this.taskYear}&percent=${this.fullScoreRate}`,false).then(data=>{
                    this.fullScoreList = data.quotas ;
                    let xData = [];
                    let yData = [];
                    for(let obj in data.townCount){
                        xData.push(obj);
                        yData.push(data.townCount[obj]);
                    }
                    this.$nextTick(()=>{
                        this.doCharsLoadingClose(_ => {this.drawFullScoreChart(xData,yData);});
                    })
                }).catch(this.doCharsLoadingClose);
            },
            /*满分指标图*/
            drawFullScoreChart(xData,yData){
                let self = this;
                let chart = echarts.init(document.getElementById('fullScoreChart'));
                let option = {
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval:0,
                            rotate:35
                        },
                        name:'党委'
                    },
                    yAxis: {
                        type: 'value',
                        name:'指标/个'
                    },
                    series: [{
                        data: yData,
                        type: 'bar',
                        barWidth : 40,//柱图宽度
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return self.colorList[params.dataIndex%8]
                                },
                                label: {
                                    formatter: function (val) {
                                        return `${val.value}`+'个'
                                    },
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#303030',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                },
                            }
                        },
                    }]
                };
                chart.setOption(option);
            },
            /*后备干部*/
            showReserveTalentData(){
                this.$http('GET',`identity/kPIVillageStatistics/reserveTalents?taskYear=${this.taskYear}&limit=${this.reserveIndex}`,false).then(data=>{
                    this.reserveTalentsList =  data.info ;
                    let legend = [];
                    let yData = [];
                    for(let obj in data.chart){
                        legend.push(obj);
                        let yDataObjData = [];
                        data.chart[obj].forEach(item => {
                            let arr = [];
                            arr.push(item.age);
                            arr.push(item.ranking);
                            arr.push(item.cadresName);
                            yDataObjData.push(arr);
                        });
                        yData.push({name:obj,type:'scatter',data:yDataObjData});
                    }
                    this.$nextTick(()=>{
                        this.doCharsLoadingClose(_ => { this.drawReserveTalentChart(legend,yData);});
                    });
                }).catch(this.doCharsLoadingClose)
            },
            /*后备干部图*/
            drawReserveTalentChart(legend,yData){
                let chart = echarts.init(document.getElementById('reserveTalentChart'));
                let option = {
                    color:['#4EBF9E','#FFB431','#3C87FF'],
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        // trigger: 'axis',
                        showDelay: 0,
                        formatter: function (params) {
                            if (params.value.length > 1) {
                                return params.seriesName + ' :<br/>'
                                    + params.value[2] + '：  '
                                    + params.value[0] + '岁 '
                                    + params.value[1] + '名 ';
                            }
                            else {
                                return params.seriesName + ' :<br/>'
                                    + params.name + ' : '
                                    + params.value + '名 ';
                            }
                        },
                    },
                    legend: {
                        data: legend,
                        left: 'center'
                    },
                    xAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name:'年龄/岁',
                            axisLabel: {
                                formatter: '{value} 岁'
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name:'排名/名',
                            min: "1",
                            axisLabel: {
                                formatter: '{value} 名'
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        }
                    ],
                    series:  yData
                };
                chart.setOption(option);
            },
            /*活动开展数据*/
            async showActivityPersonData() {
                this.activityPersonList = [];
                let data = await this.$http('GET', `identity/kPIVillageStatistics/trainingForecast?taskYear=${this.taskYear}`, false).catch(this.doCharsLoadingClose);
                if (data instanceof Array && data.length > 0) {this.doCharsLoadingClose(_ => {this.activityPersonList = data;});}
            },
            doCharsLoadingClose(callback) {
                setTimeout(_ => {
                    this.chartsLoad = false;
                    this.$nextTick( _ => {
                        if (callback && callback instanceof Function) {
                            callback();
                        }
                    })
                }, 500);
            },
            handleHasResult(data) {
                this.doCharsLoadingClose(_ => {this.hasResult = data;});
            },
            handlePersonVis(index,type){
                if(type==='open'){
                    this.activityActive.push(index);
                }else if(type==='close'){
                    this.activityActive.splice(this.activityActive.indexOf(index),1);
                }
            }
        },
        components:{
            NormalDistribution,
            RadialProgressBar
        },
        mounted() {
            // this.taskYear = new Date().getFullYear().toString();
            this.taskYear = '2020';
            this.townList = JSON.parse(sessionStorage.getItem('towns'));
        }
    }
</script>

<style scoped>
    .checkAnalysis {
        margin: 0 10px;
    }
    .checkAnalysis .chartsCard{
        flex: 1 1 auto;
        min-height: 700px;
        margin-right: 10px;
        text-align: left;
    }
    .checkAnalysis .chartsBtnDiv{
        flex: 0 0 240px;/*//不放大 不缩小 固定宽度*/
        font-size: 14px;
        font-weight: bold;
    }
    .checkAnalysis .chartsBtn{
        margin: 15px auto;
        width: 175px;
        height: 40px;
        line-height: 40px;
        border: 1px #55BD94 solid;
        border-radius: 4px;
        background: #CDFBE7;
        color: #56BC93;
    }
    .checkAnalysis .chartsBtn:hover{
        cursor: pointer;
        border: 1px #55BD94 solid;
        background: #55BD94;
        color: white;
    }
    .checkAnalysis .chartsBtnActive{
        margin: 15px auto;
        width: 175px;
        height: 40px;
        line-height: 40px;
        border: 1px #55BD94 solid;
        background: #55BD94;
        border-radius: 4px;
        color: white;
    }
    .checkAnalysis .chartsBtnActive:hover{
        cursor: pointer;
    }
    .checkAnalysis .chartsHeight{
        min-height:600px;
        width: 100%;
    }
    .checkAnalysis .doubleCheck{
        margin: 15px 5px;
        border: 1px solid #e9e9e9;
        height: 500px;
        padding: 10px 0 0 10px;
        font-weight: bold;
    }
    .checkAnalysis .doubleCheckTitle{
        margin: 15px 0px;
        display: flex;
    }
    .checkAnalysis .doubleCheckChartHeight{
        width: 440px;
        height: 400px;
    }
    .checkAnalysis .fullScore{
        width: 790px;
        height: 500px;
    }
    .checkAnalysis .fullScoreLabel{
        flex: 1;
        background: #62C3A3;
        color: #FFFFFF;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .checkAnalysis .fullScoreContent{
        max-height: 408px;
        overflow: auto;
    }
    .checkAnalysis .fullScoreContent::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
    .checkAnalysis .fullScoreItemContent{
        color: #333333;
        text-align: center;
        height: 40px;
        line-height: 40px;
        display: flex;
        font-size: 14px;
    }
    .checkAnalysis .fullScoreItem{
        flex: 1;
    }
    .checkAnalysis .fullScoreItemBg{
        background: #E3FCF1;
    }
    .checkAnalysis .reserveTalent{
        width: 660px;
        height: 500px;
    }
    .checkAnalysis .ageOutDiv{
        flex: 2;
        height: 444px;
        padding: 0 30px;
        border-radius: 5px;
    }
    .checkAnalysis .ageInnerTitleDiv{
        border: 2px #43C089 solid;
        border-bottom: none;
        display: flex;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .checkAnalysis .ageInnerContentOutDiv{
        border: 2px #43C089 solid;
        border-top: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .checkAnalysis .ageContent{
        display: flex;
        max-height: 408px;
        overflow: auto;
    }
    .checkAnalysis .ageContent::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
    .checkAnalysis .ageContentDivide{
        flex: 1;
    }
    .checkAnalysis .listLabel{
        flex: 1;
        color: #2C2C2B;
        background-color: #E3FCF1;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        text-align: center;
        /* border-right: 1px solid #AEE3CC;*/
    }
    .checkAnalysis .listItemLabel{
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: #333333;
        border-bottom: 1px solid #AEE3CC;
        border-left: 1px solid #AEE3CC;
    }
    .checkAnalysis .activityProgress{
        margin: 35px 0 50px 0;
        text-align: center;
        height: 210px;
    }
    .checkAnalysis .activityProgress .implement_activity {
        margin: 5px auto 0  ;
        width: 116px;
        height: 21px;
        line-height: 22px;
        color: #fff;
        font-size: 12px;
        background:rgba(85,189,148,1);
        border-radius:4px;
    }
    .checkAnalysis .promoteActivity{
        margin: 0px 5px;
        font-size: 16px;
        border-radius: 4px;
        min-height: 202px;
        border: 1px solid  #55BD94;
    }
    .checkAnalysis .promoteActivityTitle{
        padding: 0px 15px;
        color: #FFFFFF;
        background-color: #55BD94;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
    }
    .checkAnalysis .promoteActivityDes{
        font-size: 14px;
        color: #55BD94;
        height: 120px;
        display: flex;
        align-items: center;
        text-align: center;
    }
    .checkAnalysis .activityImg{
        flex: 1;
    }
    .checkAnalysis .activityDes{
        flex: 2;
        text-align: left;
        line-height: 25px;
    }
    .checkAnalysis .personListOut{
        border: 1px solid #55BD94;
        border-left: none;
        border-right: none;
    }
    .checkAnalysis .activityPersonBtn{
        font-size: 12px;
        color: #55BD94;
        line-height: 32px;
        text-align: center;
        font-weight:400;
        border-top: 1px dashed #55BD94;
    }
    .checkAnalysis .activityPersonBtn div:hover{
        cursor: pointer;
    }
    .checkAnalysis .activityItemLeftLabel{
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        color: black;
        border-right:  1px solid #D1F3D9;
        border-bottom: 1px solid #D1F3D9;
        width: 50%;
        display: inline-block;
        padding-left: 10px;
    }
    .checkAnalysis .activityItemLabel{
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        color: black;
        border-bottom: 1px solid #D1F3D9;
        width: 50%;
        display: inline-block;
        padding-left: 10px;
    }
    .checkAnalysis .doubleTip{
        flex: 1;
        font-size: 14px;
        font-weight: bold;
        text-align: right;
        margin-right: 10px;
    }
    .checkAnalysis .selectDate{
        width:26px;
        height:27px;
        background: url("/static/village/selectDate.png");
        margin: 0 2px 0 4px;
        display: inline-block;
        vertical-align: text-bottom;
        position: relative;
        top: 2px
    }
    .checkAnalysis .rank{
        width:14px;
        height:16px;
        background: url("/static/village/rank.png");
        margin: 0 2px 0 4px;
        display: inline-block;
        vertical-align: text-bottom;
        position: relative;
        top: -2px
    }
    .checkAnalysis .town{
        width:17px;
        height:17px;
        background: url("/static/village/town.png");
        margin: 0 2px 0 4px;
        display: inline-block;
        vertical-align: text-bottom;
        position: relative;
        top: -2px
    }
    .checkAnalysis .fullScoreImg{
        width:22px;
        height:20px;
        background: url("/static/village/fullScore.png");
        margin: 0 2px 0 4px;
        display: inline-block;
        vertical-align: text-bottom;
        position: relative;
    }
    .checkAnalysis .tool{
        width:87px;
        height:23px;
        background: url("/static/village/tool.png");
        margin: 50px auto 15px auto;
    }
    .checkAnalysis .ruleDes{
        width:87px;
        height:23px;
        background: url("/static/village/ruleDes.png");
        margin: 20px auto 15px auto;
    }
    .checkAnalysis .selectLabel{
        font-size: 16px;
        color: #4D4C4C;
        font-weight: bold
    }
    .checkAnalysis .toolValue{
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
        width: 200px;
        text-align: center;
    }
    .checkAnalysis .ruleDesValue{
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
        width: 200px;
        word-wrap:break-word;
        text-align: left;
    }
    .checkAnalysis .analysis_label {
        width: 120px;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
    }
    .checkAnalysis .analysis_value {
        width: 70px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
    }
    .checkAnalysis .avg_gt {
      color: red;
    }
</style>
<style>
    .checkAnalysis svg{
        padding: 0px!important;
        margin: 0px!important;
    }
</style>
